<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--     
    if (window.WebSocket){
        let ws = new WebSocket('地址')    // 建立连接
        ws.onopen = function(){ }        // 服务器连接成功
        ws.onclose = function(){ }       // 服务器连接关闭
        ws.onerror = function(){ }       // 服务器连接出错
        ws.onmessage = function(){ }     // 解析信息
    } -->
    <!-- ws.readyState
    0 正在链接中
    1 已经链接并且可以通讯
    2 连接正在关闭
    3 连接已关闭或者没有链接成功 -->

    <!-- 
    ws.send() // 发送请求
    ws.close() // 关闭连接
 -->
    <script>
        // WebSocket.onopen属性定义一个事件处理程序，当WebSocket 的连接状态readyState 变为1时调用;
        // 这意味着当前连接已经准备好发送和接受数据。这个事件处理程序通过 事件（建立连接时）触发。

        var ws = new WebSocket('ws://localhost:3000/');
        console.log(ws.readyState, '一开始的状态值');
        // Web Socket 已连接上，使用 send() 方法发送数据
        // 写法一：
        //    setInterval(function() {
        //        if(ws.readyState==1){
        //         ws.send('客户端消息');
        //        }
        //        },2000);
        // 写法二：
        ws.onopen = function () {
            console.log(ws.readyState, 'onopen函数执行的时候的状态值');
            // 这里用一个延时器模拟事件
            //    setInterval(function() {
            ws.send('向服务端发送的数据');
            //    },2000);
        }
        // 这里接受服务器端发过来的消息
        ws.onmessage = function (e) {
            console.log('服务器返回的数据','==================>',JSON.parse(e.data))

        }

    </script>
</body>

</html>